import { Component, OnInit } from '@angular/core';
import {FormBuilder, Validators} from '@angular/forms';
import {DatePipe} from '@angular/common';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss'],
  providers: [DatePipe]
})
export class MainComponent implements OnInit {

  // 时间参数表单
  dateForm = this.fb.group({
    type: ['C', Validators.required],
    granularity: ['1'],
    granularityType: ['MIN'],
    delay: ['0'],
    delayType: ['MIN'],
    initDate: [''],
    isDisabled: [true],
    isInit: [true],
    placeHolder: [''],
    dateFormat: [''],
    rtDateFormat: [''],
    showTime: [true],
    relative: [false],
    returnParam: [[]]
  });

  // 时间控件参数
  dateParam = {
    type: 'C',
    granularity: 1,
    granularityType: 'MIN',
    delay: 0,
    delayType: 'MIN',
    isDisabled: true,
    isInit: true,
    initDate: '',
    placeHolder: '请选择日期',
    dateFormat: '',
    rtDateFormat: '',
    showTime: true,
    relative: false,
    returnParam: ''
  };

  // 参数列表
  paramList = [
    {name: '类型', value: 'type'},
    {name: '粒度', value: 'granularity'},
    {name: '倒推', value: 'delay'},
    {name: '禁选此刻以后时间', value: 'isDisabled'},
    {name: '是否初始化', value: 'isInit'},
    {name: '输入框提示语', value: 'placeHolder'},
    {name: '显示时间格式化', value: 'dateFormat'},
    {name: '返回时间格式化', value: 'rtDateFormat'},
    {name: '是否显示时间选择', value: 'showTime'},
    {name: '是否关联组件', value: 'relative'}
  ];

  curDate = null;   // 当前时间控件值
  startDate: Date = null;
  endDate: Date = null;

  // 粒度数对照表
  granularityContrast = {
    MIN: {
      name: '分钟',
      granularity: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
    },
    H: {
      name: '小时',
      granularity: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    },
    D: {
      name: '天',
      granularity: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
    },
    MON: {
      name: '月'
    },
    Y: {
      name: '年'
    }
  };
  granularityList = [];

  // 根据类型显示属性
  isGranularity = true;
  isGranularityType = true;
  isDelay = true;
  isDelayType = true;
  isPlaceHolder = true;
  isShowTime = true;
  isDisabled = true;
  isRelative = true;

  // 属性列表
  attributeList = [
    '类型(type)：时间控件类型，会根据不同的类型切换不同的时间控件。普通为C，分钟为MIN，小时为H，天为D，周为W，月为MON，季为Q，年为Y，区间为R',
    '粒度数(granularity)：时间的间隔，以分钟粒度为例，假如设置粒度数为15，那么控件中分钟选项显示为0、15、30、45',
    '粒度类型(granularityType)：在普通类型需要指定粒度类型。分钟粒度为MIN、小时粒度为H',
    '倒推(delay)：根据当前的时间粒度往前倒推，假如当前是分钟粒度，延时5分钟，即在当前时间往前倒推5分钟',
    '倒推类型(delayType)：在普通类型需要指定倒推的类型。分钟为MIN、小时为H、天为D、月为MON、年为Y',
    '输入框提示语(placeHolder)：时间控件输入框的placeHolder提示语，默认会根据时间粒度而改变提示语',
    '显示时间格式化(dateFormat)：根据指定的格式对控件的显示时间进行格式化。yyyy为年份，MM为月份，dd为天数，HH为24小时制，hh为12小时制，mm为分钟，ss为秒数',
    '返回时间格式化(rtDateFormat)：根据指定的格式对返回的时间进行格式化。yyyy为年份，MM为月份，dd为天数，HH为小时，hh为12小时制，mm为分钟，ss为秒数',
    '初始化组件(isInit)：是否默认初始化时间控件，区间粒度默认为false，其他粒度默认为true',
    '是否显示时间选择(showTime)：控件是否添加时间选择功能。该属性只针对普通控件和区间控件，其余粒度控件无效，默认为true',
    '禁选此刻以后时间(isDisabled)：是否禁选当前时间以后的时间，默认为true',
    '关联组件(relative)：两个时间组件是否相互关联，用于开始时间和结束时间，默认为false',
    '开始时间(startDate)：开始控件的时间，用于传入到结束控件，对它进行禁选开始时间以前的所有日期时间，只在relative属性设置为true时生效',
    '结束时间(endDate)：结束控件的时间，用于传入到开始控件，对它进行禁选结束时间以后的所有日期时间，只在relative属性设置为true时生效',
    '额外返回参数(returnParam)：除了默认返回的date属性，还可以将以上所有的属性返回。例如："type,delay"就可以将类型和倒推都一并返回'
  ];

  constructor(
    private fb: FormBuilder,
    private datePipe: DatePipe
  ) { }

  ngOnInit() {
    this.granularityList = this.granularityContrast.MIN.granularity;
  }

  /**
   * 监听类型切换事件
   */
  handleTypeChange(type) {
    // 是否支持粒度类型属性
    if (type === 'C') {
      this.isGranularityType = true;
      this.isDelayType = true;
      this.dateForm.get('granularityType').enable();
      this.dateForm.get('delayType').enable();
    } else {
      this.isGranularityType = false;
      this.isDelayType = false;
      this.dateForm.get('granularityType').disable();
      this.dateForm.get('delayType').disable();
    }

    // 是否支持粒度数属性
    if (type === 'C' || type === 'MIN' || type === 'H') {
      this.isGranularity = true;
      this.granularityList = this.granularityContrast[this.dateForm.value.type] ? this.granularityContrast[this.dateForm.value.type].granularity : this.granularityContrast[this.dateForm.value.granularityType].granularity;
      this.dateForm.get('granularity').enable();
    } else {
      this.isGranularity = false;
      this.dateForm.get('granularity').disable();
    }

    // 是否支持延时属性
    if (type === 'W' || type === 'Q' || type === 'R') {
      this.isDelay = false;
      this.dateForm.get('delay').disable();
    } else {
      this.isDelay = true;
      this.dateForm.get('delay').enable();
    }

    // 是否支持输入框提示语属性、是否初始化控件
    if (type !== 'R') {
      this.isPlaceHolder = true;
      this.dateForm.get('placeHolder').enable();
      this.dateForm.get('isInit').setValue(true);
    } else {
      this.isPlaceHolder = false;
      this.dateForm.get('placeHolder').disable();
      this.dateForm.get('isInit').setValue(false);
    }

    // 是否显示时间选择属性
    if (type === 'C' || type === 'R') {
      this.isShowTime = true;
      this.dateForm.get('showTime').enable();
    } else {
      this.isShowTime = false;
      this.dateForm.get('showTime').disable();
    }

    // 是否显示禁选此刻以后时间属性
    if (type === 'W' || type === 'R') {
      this.isDisabled = false;
      this.dateForm.get('isDisabled').disable();
    } else {
      this.isDisabled = true;
      this.dateForm.get('isDisabled').enable();
    }

    // 是否显示关联组件属性
    if (type === 'R') {
      this.isRelative = false;
      this.dateForm.get('relative').disable();
    } else {
      this.isRelative = true;
      this.dateForm.get('relative').enable();
    }
  }

  /**
   * 提交表单
   */
  submitDateForm() {
    const formParam = JSON.parse(JSON.stringify(this.dateForm.value));
    formParam.returnParam = formParam.returnParam.join(',');
    this.startDate = null;
    this.endDate = null;

    if (!formParam.isInit) {
      this.curDate = '';
    }
    this.dateParam = formParam;
  }

  /**
   * 监听时间控件返回值
   */
  handleSelectDate(dateObj) {
    if (dateObj.date instanceof Array) {
      this.curDate = this.transformDate(dateObj.date[0], 'yyyy-MM-dd HH:mm:ss') + ' ~ ' + this.transformDate(dateObj.date[1], 'yyyy-MM-dd HH:mm:ss');
    } else {
      this.curDate = this.transformDate(dateObj.date, this.dateParam.type);
    }
  }

  /**
   * 监听开始时间控件返回值
   */
  handleStartDate(dateObj) {
    this.startDate = dateObj.date;
  }

  /**
   * 监听结束时间控件返回值
   */
  handleEndDate(dateObj) {
    this.endDate = dateObj.date;
  }

  /**
   * 时间格式化
   */
  transformDate(date, type: string = '') {
    let format = '';

    if (type.length < 4) {
      switch (type) {
        case 'MIN':
          format = 'yyyy-MM-dd HH:mm';
          break;
        case 'H':
          format = 'yyyy-MM-dd HH';
          break;
        case 'D':
          format = 'yyyy-MM-dd';
          break;
        case 'W':
          format = 'yyyy-ww';
          break;
        case 'MON':
          format = 'yyyy-MM';
          break;
        case 'Y':
          format = 'yyyy';
          break;
        default:
          format = 'yyyy-MM-dd HH:mm:ss';
          break;
      }
    } else {
      format = type;
    }

    return this.datePipe.transform(date, format);
  }

  /**
   * 时间日期格式化
   */
  // transformDate(date, type: string) {
  //   let format = '';
  //
  //   if (type.length < 4) {
  //     switch (type) {
  //       case 'MIN':
  //         format = 'yyyy-MM-dd hh:mm:00';
  //         break;
  //       case 'H':
  //         format = 'yyyy-MM-dd hh:00:00';
  //         break;
  //       case 'D':
  //         format = 'yyyy-MM-dd 00:00:00';
  //         break;
  //       case 'MON':
  //         format = 'yyyy-MM-01 00:00:00';
  //         break;
  //       case 'Y':
  //         format = 'yyyy-01-01 00:00:00';
  //         break;
  //       default:
  //         format = 'yyyy-MM-dd hh:mm:ss';
  //         break;
  //     }
  //   } else {
  //     format = type;
  //   }
  //
  //   const curDate = new Date(date);
  //   const o = {
  //     'M+': curDate.getMonth() + 1, // 月份
  //     'd+': curDate.getDate(), // 日
  //     'h+': curDate.getHours() >= 10 ? curDate.getHours() : '0' + curDate.getHours(), // 小时
  //     'm+': curDate.getMinutes() >= 10 ? curDate.getMinutes() : '0' + curDate.getMinutes(), // 分
  //     's+': curDate.getSeconds() >= 10 ? curDate.getSeconds() : '0' + curDate.getSeconds(), // 秒
  //     'q+': Math.floor((curDate.getMonth() + 3) / 3), // 季度
  //     S: curDate.getMilliseconds() // 毫秒
  //   };
  //   if (/(y+)/.test(format)) {
  //     format = format.replace(RegExp.$1, (curDate.getFullYear() + '').substr(4 - RegExp.$1.length));
  //   }
  //   for (const k in o) {
  //     if (new RegExp('(' + k + ')').test(format)) {
  //       format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
  //     }
  //   }
  //   return format;
  // }
}
